<template>
  <div class="micro-charts-ad-box">
    <!--预览区-->
    <div class="previewStyle">
      <!-- 纵向平铺 -->
      <div v-show="formData.indicator == 1&&formData.chartsList.length" class="dis flex_d" :style="{height: formData.height/2 + 'px', paddingLeft: formData.pageMargin/2 + 'px',paddingRight: formData.pageMargin/2 + 'px',paddingTop: formData.marginTop/2 + 'px',paddingBottom: formData.marginBottom/2 + 'px'}">
        <div v-for="(item,index) in formData.chartsList" :key="index" class="flex_1 endtileImg" :style="{borderRadius: formData.cornerBorder/2 + 'px',marginBottom: formData.imageMargin_a/2 + 'px'}">
          <vue-charts :ref="`${item.canvasId}-1`" :key="`${item.canvasId}-1`" :canvasId="`${item.canvasId}-1`" :canvas2d="true" :inScrollView="true" :type="`${item.chartsType}`" :opts="item.uchatsOpts" :chartData="item.uchatsData" :reshow="delayload" :loadingType="item.loadingType?item.loadingType:2"/>
          <div v-show="item.isTag" class="img-tag" :class="`img-tag-${item.style}`" :style="{top:`${formData.topRange}%`,left:`${formData.leftRange}%`,width:`${formData.labelWidth}px`,height:`${formData.labelHeight}px`,borderTopRightRadius:`${formData.tagHorn/2}px`,borderBottomRightRadius:`${formData.tagHorn/2}px`,background: `${formData.bg_color}`, color: `${formData.txt_color}`,opacity: `${formData.labelTransparency}`,transform: `rotate(${formData.labelRotation}deg)`}">{{ item.labelName }}</div>
        </div>
      </div>
      <!-- 横向平铺 -->
      <div v-show="formData.indicator == 2&&formData.chartsList.length" class="dis" :style="{height: formData.height/2 + 'px',paddingLeft: formData.pageMargin/2 + 'px',paddingRight: formData.pageMargin/2 + 'px',paddingTop: formData.marginTop/2 + 'px',paddingBottom: formData.marginBottom/2 + 'px'}">
        <div v-for="(item,index) in formData.chartsList" :key="index" class="flex_1 tileImg" :style="{borderRadius: formData.cornerBorder/2 + 'px',marginRight: formData.imageMargin_a/2 + 'px'}">
          <vue-charts :ref="`${item.canvasId}-2`" :key="`${item.canvasId}-2`" :canvasId="`${item.canvasId}-2`" :canvas2d="true" :inScrollView="true" :type="`${item.chartsType}`" :opts="item.uchatsOpts" :chartData="item.uchatsData" :reshow="delayload"  :loadingType="item.loadingType?item.loadingType:2"/>
          <div v-show="item.isTag" class="img-tag" :class="`img-tag-${item.style}`" :style="{top:`${formData.topRange}%`,left:`${formData.leftRange}%`,width:`${formData.labelWidth}px`,height:`${formData.labelHeight}px`,borderTopRightRadius:`${formData.tagHorn/2}px`,borderBottomRightRadius:`${formData.tagHorn/2}px`,background: `${formData.bg_color}`, color: `${formData.txt_color}`, opacity: `${formData.labelTransparency}`,transform: `rotate(${formData.labelRotation}deg)`}">{{ item.labelName }}</div>
        </div>
      </div>
      <div v-show="!formData.chartsList.length" class="image-ad-view">
        <div class="image-ad-title">
          请添加图表组件
        </div>
      </div>
    </div>
    <!--编辑区-->
    <div v-show="isShowEdit" class="design-editor-item design-hide-class">
      <el-scrollbar wrap-class="scroll-content">
        <div class="rightWrap styleWrap">
          <div class="design-editor-component-title">图表组件</div>
          <div class="tabRadioWrap">
            <el-radio-group v-model="formData.indicator">
              <el-tooltip v-for="(item,index) in tabList" :key="index" effect="dark" :content="item.title" placement="bottom">
                <el-radio-button :label="index + 1">
                  <span :class="[item.icon]" />
                </el-radio-button>
              </el-tooltip>
            </el-radio-group>
          </div>
          <el-tabs v-model="settingActive" tab-position="top" style="marginTop: 10px;" @tab-click="handleClick">
            <el-tab-pane label="内容设置" name="0">
              <p>添加图表：<span style="color:#b7b7b7;">最多添加10个</span></p>
              <div>
                <draggable :list="formData.chartsList" ghost-class="ghost" handle=".ad-handle">
                  <div v-for="(item,index) in formData.chartsList" :key="index" class="ad-image-main ad-handle">
                    <div class="ad-image-list">
                      <div class="ad-image-list-img">
                        <div style="margin:10px 0 0; ">
                          <span style="margin-bottom: 5px;">是否显示标签：</span>
                          <el-radio-group v-model="item.isTag" size="small">
                            <el-radio-button :label="true">显示</el-radio-button>
                            <el-radio-button :label="false">隐藏</el-radio-button>
                          </el-radio-group>
                        </div>
                        <div style="margin:10px 0 0; ">
                          <span style="margin-bottom: 5px;">设置图表样式：</span>
                          <div class="charts-style" @click="setChartStyle(item.chartsType, item.canvasId, formData.indicator, index)">
                            <span>样式配置</span>
                            <i class="el-icon-arrow-right"></i>
                          </div>
                        </div>
                      </div>
                      <div class="ad-image-list-content">
                        <div>
                          <div class="ad-image-title">
                            <span>图表标题：</span>
                            <el-input v-model="item.title" size="mini" placeholder="输入标题" />
                          </div>
                          <div class="ad-image-data">
                            <span>数据源：</span>
                            <div v-if="item.type >= 0&&item.microType&&item.microTitle" class="dis al_item">
                              <span class="typeName">{{ item.microType }}</span>
                              <span class="microTitle">{{ item.microTitle }}</span>
                              <span class="cursor modifyBtn microTitle" @click="choosePage(index)">修改</span>
                            </div>
                            <div v-else class="cursor modifyBtn" @click="choosePage(index)">请选择跳转到的页面</div>
                          </div>
                          <div class="ad-image-link">
                            <span>跳转路径：</span>
                            <div v-if="item.type >= 0&&item.microType&&item.microTitle" class="dis al_item">
                              <span class="typeName">{{ item.microType }}</span>
                              <span class="microTitle">{{ item.microTitle }}</span>
                              <span class="cursor modifyBtn microTitle" @click="choosePage(index)">修改</span>
                            </div>
                            <div v-else class="cursor modifyBtn" @click="choosePage(index)">请选择跳转到的页面</div>
                          </div>

                        </div>
                        <i class="el-icon-error close-icon" @click="formData.chartsList.splice(index, 1)" />
                      </div>
                    </div>
                  </div>
                </draggable>
              </div>
              <!--选择图片框-->
              <div v-if="10 - formData.chartsList.length !== 0" class="ad-add-image" >
                 <el-dropdown trigger="click" @command="addNewCharts">
                  <span class="el-dropdown-link">
                    添加图表<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown" class="ad-dropdown-menu">
                    <el-dropdown-item command="column">柱状图</el-dropdown-item>
                    <el-dropdown-item command="mount">山峰图</el-dropdown-item>
                    <el-dropdown-item command="bar">条状图</el-dropdown-item>
                    <el-dropdown-item command="tline">折线图</el-dropdown-item>
                    <el-dropdown-item command="tarea">区域图</el-dropdown-item>
                    <el-dropdown-item command="scatter">散点图</el-dropdown-item>
                    <el-dropdown-item command="bubble">气泡图</el-dropdown-item>
                    <el-dropdown-item command="mix">混合图</el-dropdown-item>
                    <el-dropdown-item command="pie">饼状图</el-dropdown-item>
                    <el-dropdown-item command="ring">环形图</el-dropdown-item>
                    <el-dropdown-item command="rose">玫瑰图</el-dropdown-item>
                    <el-dropdown-item command="radar">雷达图</el-dropdown-item>
                    <el-dropdown-item command="arcbar">进度条</el-dropdown-item>
                    <el-dropdown-item command="gauge">仪表盘</el-dropdown-item>
                    <el-dropdown-item command="funnel">漏斗图</el-dropdown-item>
                    <el-dropdown-item command="word">词云图</el-dropdown-item>
                    <el-dropdown-item command="candle">K线图</el-dropdown-item>
                    <el-dropdown-item command="map">地图</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </el-tab-pane>
            <el-tab-pane label="样式设置" name="1">
              <div class="styleWrap">
                <div class="titleStyle">内容样式</div>
                <div>
                  <div class="dis dis_ju_spb al_item w100e item_mar">
                    <div>边角样式</div>
                    <el-radio-group v-model="formData.cornerBorder" size="small">
                      <el-radio-button label="0">直角</el-radio-button>
                      <el-radio-button label="16">圆角</el-radio-button>
                    </el-radio-group>
                  </div>
                  <div class="dis dis_ju_spb al_item w100e item_mar">
                    <div>图表间距</div>
                    <el-radio-group v-model="formData.imageMargin_a" size="small">
                      <el-radio-button label="0">无</el-radio-button>
                      <el-radio-button label="30">有</el-radio-button>
                    </el-radio-group>
                  </div>
                </div>
              </div>
              <div class="styleWrap">
                <div class="titleStyle">
                  组件样式
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>页边距</span>
                    <span class="text_mar">{{ formData.pageMargin }}px</span>
                  </div>
                  <el-radio-group v-model="formData.pageMargin" size="small">
                    <el-radio-button label="0">无</el-radio-button>
                    <el-radio-button label="15">有</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>上边距</span>
                    <span class="text_mar">{{ formData.marginTop }}px</span>
                  </div>
                  <el-radio-group v-model="formData.marginTop" size="small">
                    <el-radio-button label="0">小</el-radio-button>
                    <el-radio-button label="15">中</el-radio-button>
                    <el-radio-button label="30">大</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>下边距</span>
                    <span class="text_mar">{{ formData.marginBottom }}px</span>
                  </div>
                  <el-radio-group v-model="formData.marginBottom" size="small">
                    <el-radio-button label="0">小</el-radio-button>
                    <el-radio-button label="15">中</el-radio-button>
                    <el-radio-button label="30">大</el-radio-button>
                  </el-radio-group>
                </div>
                <div v-show="formData.indicator !== 3" class="progressWrap">
                  <div class="progressBox dis al_item dis_ju_spb">
                    <div>框体高度</div>
                    <div class="flex_1 dis al_item dis_ju_end">
                      <div class="flex_1 progress">
                        <el-slider v-model="formData.height" :max="1000" />
                      </div>
                      <div class="inpWrap">{{ formData.height }}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div v-show="isTagStyle" class="styleWrap">
                <div class="titleStyle">
                  标签样式
                </div>
                <div class="dis dis_ju_spb al_item w100e item_mar">
                  <div>边角样式</div>
                  <el-radio-group v-model="formData.tagHorn" size="small">
                    <el-radio-button :label="0">直角</el-radio-button>
                    <el-radio-button :label="10">圆角</el-radio-button>
                    <el-radio-button :label="32">半圆角</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="progressWrap" style="padding-top:0">
                  <div class="progressBox dis al_item dis_ju_spb">
                    <div class="dis al_item">
                      <span>背景颜色</span>
                      <span class="text_mar">{{ formData.bg_color }}</span>
                    </div>
                    <div class="dis al_item">
                      <div class="resetText" @click="resetBoderColor(2)">重置</div>
                      <el-color-picker v-model="formData.bg_color" :show-alpha="false" color-format="hex" size="mini" />
                    </div>
                  </div>
                </div>
                <div class="progressWrap" style="padding-top:0">
                  <div class="progressBox dis al_item dis_ju_spb">
                    <div class="dis al_item">
                      <span>文字颜色</span>
                      <span class="text_mar">{{ formData.txt_color }}</span>
                    </div>
                    <div class="dis al_item">
                      <div class="resetText" @click="resetBoderColor(1)">重置</div>
                      <el-color-picker v-model="formData.txt_color" :show-alpha="false" color-format="hex" size="mini" />
                    </div>
                  </div>
                </div>
                <div class="progressWrap" style="padding-top:0">
                  <div class="progressBox dis al_item dis_ju_spb">
                    <div>距离左边</div>
                    <div class="flex_1 dis al_item dis_ju_end">
                      <div class="flex_1 progress">
                        <el-slider v-model="formData.leftRange" :max="100" />
                      </div>
                      <div class="inpWrap">{{ formData.leftRange }}</div>
                    </div>
                  </div>
                </div>
                <div class="progressWrap" style="padding-top:0">
                  <div class="progressBox dis al_item dis_ju_spb">
                    <div>距离上边</div>
                    <div class="flex_1 dis al_item dis_ju_end">
                      <div class="flex_1 progress">
                        <el-slider v-model="formData.topRange" :max="100" />
                      </div>
                      <div class="inpWrap">{{ formData.topRange }}</div>
                    </div>
                  </div>
                </div>
                <div class="progressWrap" style="padding-top:0">
                  <div class="progressBox dis al_item dis_ju_spb">
                    <div>标签宽度</div>
                    <div class="flex_1 dis al_item dis_ju_end">
                      <div class="flex_1 progress">
                        <el-slider v-model="formData.labelWidth" :max="100" />
                      </div>
                      <div class="inpWrap">{{ formData.labelWidth }}</div>
                    </div>
                  </div>
                </div>
                <div class="progressWrap" style="padding-top:0">
                  <div class="progressBox dis al_item dis_ju_spb">
                    <div>标签高度</div>
                    <div class="flex_1 dis al_item dis_ju_end">
                      <div class="flex_1 progress">
                        <el-slider v-model="formData.labelHeight" :max="100" />
                      </div>
                      <div class="inpWrap">{{ formData.labelHeight }}</div>
                    </div>
                  </div>
                </div>
                <div class="progressWrap" style="padding-top:0">
                  <div class="progressBox dis al_item dis_ju_spb">
                    <div>旋转角度</div>
                    <div class="flex_1 dis al_item dis_ju_end">
                      <div class="flex_1 progress">
                        <el-slider v-model="formData.labelRotation" :max="360" />
                      </div>
                      <div class="inpWrap">{{ formData.labelRotation }}</div>
                    </div>
                  </div>
                </div>
                <div class="progressWrap" style="padding-top:0">
                  <div class="progressBox dis al_item dis_ju_spb">
                    <div>透明度</div>
                    <div class="flex_1 dis al_item dis_ju_end">
                      <div class="flex_1 progress">
                        <el-slider v-model="formData.labelTransparency" :step="0.1" :max="1" />
                      </div>
                      <div class="inpWrap">{{ formData.labelTransparency }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-scrollbar>
    </div>

    <el-dialog custom-class="up-dialog" :close-on-click-modal="false" top="5vh" title="已上架商品" :visible.sync="dialogChooseGoods" width="70%">
      <div class="dialog-content">
        <chooseGoods :is-get-choose-data="isGetChooseData" @chooseGoodsFun="chooseGoodsFun" />
        <div slot="footer" style="text-align: right;margin-top: 20px;">
          <el-button size="mini" type="primary" @click="isGetChooseData=!isGetChooseData">确定</el-button>
          <el-button size="mini" @click="dialogChooseGoods = false">取消</el-button>
        </div>
      </div>
    </el-dialog>

    <!--选择微页面-->
    <el-dialog :close-on-click-modal="false" :modal="false" top="5vh" :visible.sync="dialogChoosePages" title="页面选择" width="55%">
      <choose-feature :is-get-choose-data="isGetChooseFeature" @chooseChooseFeaturesFun="chooseChooseFeaturesFun" />
      <div slot="footer" class="dialog-footer" style="text-align: right;margin-top: 20px;">
        <el-button size="mini" type="primary" @click="isGetChooseFeature=!isGetChooseFeature">确定</el-button>
        <el-button size="mini" @click="dialogChoosePages = false">取消</el-button>
      </div>
    </el-dialog>

    <!--选择图表样式页面-->
    <el-dialog custom-class="charts-style-dialog" :close-on-click-modal="false" :modal="false" top="5vh" :visible.sync="dialogChooseChartStyle" title="图表样式" width="30%">
      <choose-charts-style :canvas-id="selectedCanvasId" :charts-index="selectedChartsIndex" :charts-type="selectedChartsType" :charts-opts="selectedChartsOpts" :is-get-choose-data="isGetChooseChartStyle" @chooseChartStyleFun="chooseChartStyleFun" />
      <div slot="footer" class="dialog-footer" >
        <el-button size="mini" type="primary" @click="isGetChooseChartStyle=!isGetChooseChartStyle">确定</el-button>
        <el-button size="mini" @click="dialogChooseChartStyle = false">取消</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import index from './index.js'

export default index
</script>
